<template>
  <n-drawer class="sale-info" v-model:show="rewardInfoDrawerActive" width="63%">
    <n-drawer-content body-style="--n-body-padding:0" closable>
      <template #header>
        <p class="my-title--primary">奖励订单(详情)</p>
      </template>
      <div class="i-card">
        <div class="i-card_item">
          <span>奖励人：是多大</span>
        </div>
        <div class="i-card_item">
          <span>奖励类型：至尊奖励</span>
        </div>
        <div class="i-card_item">
          <span>奖励金额：￥340</span>
        </div>
        <div class="i-card_item">
          <span>奖励时间：2022-02-25 09:51:18</span>
        </div>
      </div>
      <div class="i-content">
        <div class="i-content_item">
          消费人：王撒大
        </div>
        <div class="i-content_item">
          会员类型：至尊会员
        </div>
        <div class="i-content_item">
          订单编号：xsDD-3213123123
        </div>
        <div class="i-content_item">
          订单类型：销售订单
        </div>
        <div class="i-content_item">
          订单金额：5
        </div>
        <div class="i-content_item">
          下单时间：2022-02-23 09:23:32
        </div>
      </div>
      <div class="i-table">
        <n-data-table :columns="columns" :data="data" bordered />
      </div>
      <template #footer>
        <div class="i-footer">
          <button class="my-btn--primary">确认</button>
        </div>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<script setup>
import {
  inject,
  reactive
} from "vue";
const rewardInfoDrawerActive = inject('rewardInfoDrawerActive')

const columns = [{
  title: "商品",
  key: "goods"
},
{
  title: "规格",
  key: "spec"
},
{
  title: "数量",
  key: "quantity"
},
{
  title: "单价￥",
  key: "amount"
},
{
  title: "商品积分",
  key: "integral"
}
];
const data = reactive([{
  goods: 'B1-4042带腿胸托',
  spec: "黑色/XL",
  quantity: 1,
  amount: 248,
  integral: 1
},
{
  goods: 'B1-4042带腿胸托',
  spec: "黑色/XL",
  quantity: 1,
  amount: 248,
  integral: 1
}
])
</script>

<style lang="less" scoped>
.sale-info {
  .i-card {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-template-rows: repeat(2, 50%);
    height: 128px;
    padding: 20px 30px;
    margin: 20px;
    background: #f8f8f8;
    border-radius: 4px;

    &_item {
      margin: 10px 0;
      font-size: 24px;
      font-weight: 500;
      color: #4a5060;
    }
  }

  .i-content {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-template-rows: repeat(3, 33.3%);
    padding:20px 30px;
    &_item {
      margin: 10px 0;
      font-size: 24px;
      font-weight: 500;
      color: #4a5060;
    }
  }
  .i-table {
    margin: 20px 40px 20px 20px;
  }
  .i-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
  }
}
</style>